<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/currency.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/music.css">
    <link rel="stylesheet" href="css/player/player01.css">
    <link rel="stylesheet" href="css/player/player02.css">
    <link rel="stylesheet" href="css/player/player03.css">
    <link rel="stylesheet" href="css/player/player04.css">
    <link rel="stylesheet" href="css/player/player05.css">
    <link rel="stylesheet" href="css/player/player06.css">
    <link rel="stylesheet" href="css/player/player07.css">
    <link rel="stylesheet" href="css/player/player08.css">
    <link rel="stylesheet" href="css/player/player09.css">
    <link rel="stylesheet" href="css/player/player10.css">
    <link rel="stylesheet" href="css/fixed.css">
</head>
<body>
<div style="width: 100%;text-align: center;color: white;background: #2caf6f;padding: 4px 0">
    该项目只用于学习与参考，并无其他用意。项目地址：
    <a style="color: white;text-decoration: underline;" href="https://github.com/VXiaoXin/vxiaoxin.github.io" target="_blank">vxiaoxin.github</a>
</div>
<!--头部-->
<div class="head-box">
    <div class="head-center-box head-top-box">
        <img class="head-top-box-img" src="./image/logo.png" alt="QQ音乐Logo">
        <div class="head-top-nav-active">音乐馆</div>
        <div class="head-top-nav">我的音乐</div>
        <div class="head-top-nav head-client-nav">
            <span>客户端</span>
            <img style="position: absolute;top: 18px;right: 0;height: 14px;"
                 src="./image/mark_1.png" alt="抢先版">
            <div class="head-client-box">
                <div class="head-client-item">
                    <i class="head-client-item-i head-client-item-i-01"></i>
                    <span class="head-client-item-span">HQ高品质 全员开启</span>
                </div>
                <div class="head-client-item">
                    <i class="head-client-item-i head-client-item-i-02"></i>
                    <span class="head-client-item-span">独家音效 全面升级</span>
                </div>
                <div class="head-client-item">
                    <i class="head-client-item-i head-client-item-i-03"></i>
                    <span class="head-client-item-span">轻盈视觉 动态皮肤</span>
                </div>
                <a href="#" class="head-download-btn">下载体验</a>
            </div>
        </div>
        <div class="head-top-nav">开放平台</div>
        <div class="head-top-nav">VIP</div>
        <div style="flex-grow: 1;flex-shrink: 0;text-align: right;display: flex;justify-content: flex-end;align-items: center;">
            <div class="head-input-box">
                <input class="head-input" type="text" placeholder="搜索音乐、MV、歌单、用户">
                <i class="head-input-i"></i>
                <div class="head-input-search">
                    <div class="head-input-search-item">
                        <div class="head-input-search-item-index">1.</div>
                        <div class="head-input-search-item-name">我们的歌</div>
                        <div class="head-input-search-item-number">76.6万</div>
                    </div>
                    <div class="head-input-search-item">
                        <div class="head-input-search-item-index">2.</div>
                        <div class="head-input-search-item-name">冰雪奇缘2</div>
                        <div class="head-input-search-item-number">58.7万</div>
                    </div>
                    <div class="head-input-search-item">
                        <div class="head-input-search-item-index">3.</div>
                        <div class="head-input-search-item-name">张杰</div>
                        <div class="head-input-search-item-number">32.4万</div>
                    </div>
                    <div class="head-input-search-item">
                        <div class="head-input-search-item-index">4.</div>
                        <div class="head-input-search-item-name">桥边姑娘</div>
                        <div class="head-input-search-item-number">28.8万</div>
                    </div>
                    <div class="head-input-search-item">
                        <div class="head-input-search-item-index">5.</div>
                        <div class="head-input-search-item-name">早晨大海</div>
                        <div class="head-input-search-item-number">20.3万</div>
                    </div>
                    <div class="search-history-box">
                        <div class="search-history-text">历史搜索</div>
                        <i class="search-history-i"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-login">登录</div>
        <div class="head-lv-zuan">
            <div class="head-lv-zuan-btn">开通绿钻豪华版</div>
        </div>
        <div class="head-pay">
            <div class="head-pad-btn">开通付费包</div>
        </div>
    </div>
    <div class="head-center-box head-bottom-box">
        <span class="head-bottom-item-active">首页</span>
        <span class="head-bottom-item">歌手</span>
        <span class="head-bottom-item">新碟</span>
        <span class="head-bottom-item">排行榜</span>
        <span class="head-bottom-item">分类歌单</span>
        <span class="head-bottom-item">电台</span>
        <span class="head-bottom-item">MV</span>
        <span class="head-bottom-item">数字专辑</span>
        <span class="head-bottom-item">票务</span>
    </div>
</div>
<div class="music-box">
    <div class="music-box-content">
        <div class="music-box-title">歌单推荐</div>
        <div class="music-class">
            <span class="music-class-item-active">为你推荐</span>
            <span class="music-class-item">网络歌曲</span>
            <span class="music-class-item">经典</span>
            <span class="music-class-item">KTV热歌</span>
            <span class="music-class-item">官方歌单</span>
            <span class="music-class-item">情歌</span>
        </div>
        <div class="music-player-box">
            <ul id="playerList" class="music-player-ul">
                <li class="music-player-item-01">
                    <div class="music-player-item-image-box-01">
                        <img class="music-player-item-image-01" src="image/player/01.jpg" alt="图片01">
                        <!--蒙版-->
                        <i class="music-player-item-mask-01"></i>
                        <!--播放-->
                        <i class="music-player-item-play-01"></i>
                    </div>
                    <div class="music-player-name-01">每个人心里都住着一首李宗盛</div>
                    <div class="music-player-number-01">播放量：603.1万</div>
                </li>
                <li class="music-player-item-02">
                    <div class="music-player-item-image-box-02">
                        <img class="music-player-item-image-02" src="image/player/02.jpg" alt="图片02">
                        <!--蒙版-->
                        <i class="music-player-item-mask-02"></i>
                        <!--播放-->
                        <i class="music-player-item-play-02"></i>
                    </div>
                    <div class="music-player-name-02">听说00后都在KTV里唱这些？</div>
                    <div class="music-player-number-02">播放量：2018.0万</div>
                </li>
                <li class="music-player-item-03">
                    <div class="music-player-item-image-box-03">
                        <img class="music-player-item-image-03" src="image/player/03.jpg" alt="图片03">
                        <!--蒙版-->
                        <i class="music-player-item-mask-03"></i>
                        <!--播放-->
                        <i class="music-player-item-play-03"></i>
                    </div>
                    <div class="music-player-name-03">Carnival：投放舞池的躁动引擎</div>
                    <div class="music-player-number-03">播放量：927.1万</div>
                </li>
                <li class="music-player-item-04">
                    <div class="music-player-item-image-box-04">
                        <img class="music-player-item-image-04" src="image/player/04.jpg" alt="图片04">
                        <!--蒙版-->
                        <i class="music-player-item-mask-04"></i>
                        <!--播放-->
                        <i class="music-player-item-play-04"></i>
                    </div>
                    <div class="music-player-name-04">过去30年的20首经典老歌</div>
                    <div class="music-player-number-04">播放量：597.5万</div>
                </li>
                <li class="music-player-item-05">
                    <div class="music-player-item-image-box-05">
                        <img class="music-player-item-image-05" src="image/player/05.jpg" alt="图片05">
                        <!--蒙版-->
                        <i class="music-player-item-mask-05"></i>
                        <!--播放-->
                        <i class="music-player-item-play-05"></i>
                    </div>
                    <div class="music-player-name-05">王者张大仙游戏直播BGM</div>
                    <div class="music-player-number-05">播放量：165.2万</div>
                </li>
                <li class="music-player-item-06">
                    <div class="music-player-item-image-box-06">
                        <img class="music-player-item-image-06" src="image/player/06.jpg" alt="图片06">
                        <!--蒙版-->
                        <i class="music-player-item-mask-06"></i>
                        <!--播放-->
                        <i class="music-player-item-play-06"></i>
                    </div>
                    <div class="music-player-name-06">［超好听英语系强势来袭］绝不辜负耳朵</div>
                    <div class="music-player-number-06">播放量：2583.4万</div>
                </li>
                <li class="music-player-item-07">
                    <div class="music-player-item-image-box-07">
                        <img class="music-player-item-image-07" src="image/player/07.jpg" alt="图片07">
                        <!--蒙版-->
                        <i class="music-player-item-mask-07"></i>
                        <!--播放-->
                        <i class="music-player-item-play-07"></i>
                    </div>
                    <div class="music-player-name-07">一秒倾心！那些超好听的神仙翻唱</div>
                    <div class="music-player-number-07">播放量：146.9万</div>
                </li>
                <li class="music-player-item-08">
                    <div class="music-player-item-image-box-08">
                        <img class="music-player-item-image-08" src="image/player/08.jpg" alt="图片08">
                        <!--蒙版-->
                        <i class="music-player-item-mask-08"></i>
                        <!--播放-->
                        <i class="music-player-item-play-08"></i>
                    </div>
                    <div class="music-player-name-08">华语伤感 | 路过灰色的世界</div>
                    <div class="music-player-number-08">播放量：5.1万</div>
                </li>
                <li class="music-player-item-09">
                    <div class="music-player-item-image-box-09">
                        <img class="music-player-item-image-09" src="image/player/09.jpg" alt="图片09">
                        <!--蒙版-->
                        <i class="music-player-item-mask-09"></i>
                        <!--播放-->
                        <i class="music-player-item-play-09"></i>
                    </div>
                    <div class="music-player-name-09">80记忆 | 前奏一出就想起往事</div>
                    <div class="music-player-number-09">播放量：103.0万</div>
                </li>
                <li class="music-player-item-10">
                    <div class="music-player-item-image-box-10">
                        <img class="music-player-item-image-10" src="image/player/10.jpg" alt="图片10">
                        <!--蒙版-->
                        <i class="music-player-item-mask-10"></i>
                        <!--播放-->
                        <i class="music-player-item-play-10"></i>
                    </div>
                    <div class="music-player-name-10">快手 · 100首最新最热歌曲大全</div>
                    <div class="music-player-number-10">播放量：1225.1万</div>
                </li>
            </ul>
        </div>
        <div id="playerLeftBtn" class="player-left-btn-box">
            <i class="player-left-btn"></i>
        </div>
        <div id="playerRightBtn" class="player-right-btn-box">
            <i class="player-right-btn"></i>
        </div>
        <div id="page-01-box"></div>
        <div id="page-02-box"></div>
    </div>
</div>
<div class="music-box">
</div>
<div class="fixed-box">
    <img class="fixed-image" src="image/logo.png" alt="logo">
    <div class="fixed-text">千万高品质曲库尽享</div>
    <div class="fixed-btn">
        <i class="fixed-btn-i"></i>
        客户端下载
    </div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/player.js"></script>
</html>